<template>
  <div
    class='container'
    style="padding:10px"
  >
    <el-card>
      <!-- 试题筛选组件 -->
      <questionFilter
        @getQuestionsList="getQuestionsList"
        @getCheQuestionsList="getCheQuestionsList"
        @getCheckedQuestionsList="getCheckedQuestionsList"
        @resCheckedQuestionsList="resCheckedQuestionsList"
      />
      <!-- 审核状态 -->
      <el-tabs type="card">
        <!-- 放置数据总数卡片 -->

        <!-- 放置数据总数卡片 -->
        <!-- 全部 -->
        <el-tab-pane label="全部">
          <el-row
            style="height: 35px;background-color: #f4f4f5;margin-bottom:10px"
            type="flex"
            align="middle"
          >
            <el-col :span="6">
              <div style="line-height:35px;padding-left:10px">

                <i class="el-icon-info"></i> &nbsp;
                <span
                  style="color: #909399;font-size: 13px">数据一共{{total}}条</span>
              </div>

            </el-col>
          </el-row>
          <el-table
            :data="questionList"
            style="width: 100%"
          >
            <el-table-column
              label="试题编号"
              prop="number"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="学科"
              prop="subject"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="目录"
              prop="catalog"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="题型"
              prop="questionType"
              width="50"
              align="center"
              :formatter="formatQuestType"
            ></el-table-column>
            <el-table-column
              prop="question"
              label="题干"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column
              label="录入时间"
              prop="addDate "
              width="150"
              align="center"
            >
              <template slot-scope="{ row }">
                <div>{{row.addDate | parseTimeByString}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="难度"
              prop="difficulty"
              width="150"
              align="center"
              :formatter="questionDifficulty"
            ></el-table-column>
            <el-table-column
              label="录入人"
              prop="creator"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="审核状态"
              prop="chkState"
              width="150"
              align="center"
              :formatter="questionChkType"
            ></el-table-column>
            <el-table-column
              label="审核意见"
              prop="chkRemarks"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="审核人"
              prop="chkUser"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="发布状态"
              prop="publishState"
              width="150"
              align="center"
              :formatter="questionPublishType"
            ></el-table-column>
            <el-table-column
              label="操作"
              width="250"
              fixed="right"
              align="center"
            >
              <template slot-scope="{row}">
                <el-button
                  size="small"
                  type="text"
                  @click="showPreviewDialog(row.id)"
                >预览</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="checkDialog(row.id)"
                  :disabled="row.chkState === 1 || row.chkState === 2"
                >审核</el-button>
                <el-button
                  size="small"
                  type="text"
                  :disabled="row.publishState === 1"
                  @click="$router.push(`/questions/new?id=${row.id}`)"
                >修改</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="publishStates(row)"
                >{{row.publishState === 0?'上架':'下架'}}</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="del(row)"
                  :disabled='row.publishState === 1'
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <!-- 待审核 -->
        <el-tab-pane label="待审核">
          <el-row
            style="height: 35px;background-color: #f4f4f5;margin-bottom:10px"
            type="flex"
            align="middle"
          >
            <el-col :span="6">
              <div style="line-height:35px;padding-left:10px">

                <i class="el-icon-info"></i> &nbsp;
                <span
                  style="color: #909399;font-size: 13px">数据一共{{questionCheList.length}}条</span>
              </div>

            </el-col>
          </el-row>
          <el-table
            :data="questionCheList"
            style="width: 100%"
          >
            <el-table-column
              label="试题编号"
              prop="number"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="学科"
              prop="subject"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="目录"
              prop="catalog"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="题型"
              prop="questionType"
              width="50"
              align="center"
              :formatter="formatQuestType"
            ></el-table-column>
            <el-table-column
              prop="question"
              label="题干"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column
              label="录入时间"
              prop="addDate "
              width="150"
              align="center"
            >
              <template slot-scope="{ row }">
                <div>{{row.addDate | parseTimeByString}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="难度"
              prop="difficulty"
              width="150"
              align="center"
              :formatter="questionDifficulty"
            ></el-table-column>
            <el-table-column
              label="录入人"
              prop="creator"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="审核状态"
              prop="chkState"
              width="150"
              align="center"
              :formatter="questionChkType"
            ></el-table-column>
            <el-table-column
              label="审核意见"
              prop="chkRemarks"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="审核人"
              prop="chkUser"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="发布状态"
              prop="publishState"
              width="150"
              align="center"
              :formatter="questionPublishType"
            ></el-table-column>
            <el-table-column
              label="操作"
              width="250"
              fixed="right"
              align="center"
            >
              <template slot-scope="{row}">
                <el-button
                  size="small"
                  type="text"
                  @click="showPreviewDialog(row.id)"
                >预览</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="checkDialog(row.id)"
                  :disabled="row.chkState === 1 || row.chkState === 2"
                >审核</el-button>
                <el-button
                  size="small"
                  type="text"
                  :disabled='row.publishState === 1'
                  @click="$router.push(`/questions/new?id=${row.id}`)"
                >修改</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="publishStates(row)"
                >{{row.publishState === 0?'上架':'下架'}}</el-button>

                <el-button
                  size="small"
                  type="text"
                  @click="del(row)"
                  :disabled='row.publishState === 1'
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 已审核 -->
        <el-tab-pane label="已审核">
          <el-row
            style="height: 35px;background-color: #f4f4f5;margin-bottom:10px"
            type="flex"
            align="middle"
          >
            <el-col :span="6">
              <div style="line-height:35px;padding-left:10px">

                <i class="el-icon-info"></i> &nbsp;
                <span
                  style="color: #909399;font-size: 13px">数据一共{{CheckedQuestionsList.length}}条</span>
              </div>

            </el-col>
          </el-row>
          <el-table
            :data="CheckedQuestionsList"
            style="width: 100%"
          >
            <el-table-column
              label="试题编号"
              prop="number"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="学科"
              prop="subject"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="目录"
              prop="catalog"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="题型"
              prop="questionType"
              width="50"
              align="center"
              :formatter="formatQuestType"
            ></el-table-column>
            <el-table-column
              prop="question"
              label="题干"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column
              label="录入时间"
              prop="addDate "
              width="150"
              align="center"
            >
              <template slot-scope="{ row }">
                <div>{{row.addDate | parseTimeByString}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="难度"
              prop="difficulty"
              width="150"
              align="center"
              :formatter="questionDifficulty"
            ></el-table-column>
            <el-table-column
              label="录入人"
              prop="creator"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="审核状态"
              prop="chkState"
              width="150"
              align="center"
              :formatter="questionChkType"
            ></el-table-column>
            <el-table-column
              label="审核意见"
              prop="chkRemarks"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="审核人"
              prop="chkUser"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="发布状态"
              prop="publishState"
              width="150"
              align="center"
              :formatter="questionPublishType"
            ></el-table-column>
            <el-table-column
              label="操作"
              width="250"
              fixed="right"
              align="center"
            >
              <template slot-scope="{row}">
                <el-button
                  size="small"
                  type="text"
                  @click="showPreviewDialog(row.id)"
                >预览</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="checkDialog(row.id)"
                  :disabled="row.chkState === 1 || row.chkState === 2"
                >审核</el-button>
                <el-button
                  size="small"
                  type="text"
                  :disabled='row.publishState === 1'
                  @click="$router.push(`/questions/new?id=${row.id}`)"
                >修改</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="publishStates(row)"
                >{{row.publishState === 0?'上架':'下架'}}</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="del(row)"
                  :disabled='row.publishState === 1'
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 已拒绝 -->
        <el-tab-pane label="已拒绝">
          <el-row
            style="height: 35px;background-color: #f4f4f5;margin-bottom:10px"
            type="flex"
            align="middle"
          >
            <el-col :span="6">
              <div style="line-height:35px;padding-left:10px">

                <i class="el-icon-info"></i> &nbsp;
                <span
                  style="color: #909399;font-size: 13px">数据一共{{resQuestionsList.length}}条</span>
              </div>

            </el-col>
          </el-row>
          <el-table
            :data="resQuestionsList"
            style="width: 100%"
          >
            <el-table-column
              label="试题编号"
              prop="number"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="学科"
              prop="subject"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="目录"
              prop="catalog"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="题型"
              prop="questionType"
              width="50"
              align="center"
              :formatter="formatQuestType"
            ></el-table-column>
            <el-table-column
              prop="question"
              label="题干"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column
              label="录入时间"
              prop="addDate "
              width="150"
              align="center"
            >
              <template slot-scope="{ row }">
                <div>{{row.addDate | parseTimeByString}}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="难度"
              prop="difficulty"
              width="150"
              align="center"
              :formatter="questionDifficulty"
            ></el-table-column>
            <el-table-column
              label="录入人"
              prop="creator"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="审核状态"
              prop="chkState"
              width="150"
              align="center"
              :formatter="questionChkType"
            ></el-table-column>
            <el-table-column
              label="审核意见"
              prop="chkRemarks"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="审核人"
              prop="chkUser"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              label="发布状态"
              prop="publishState"
              width="150"
              align="center"
              :formatter="questionPublishType"
            ></el-table-column>
            <el-table-column
              label="操作"
              width="250"
              fixed="right"
              align="center"
            >
              <template slot-scope="{ row }">
                <el-button
                  size="small"
                  type="text"
                  @click="showPreviewDialog(row.id)"
                >预览</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="checkDialog(row.id)"
                  :disabled="row.chkState === 1 || row.chkState === 2"
                >审核</el-button>
                <el-button
                  size="small"
                  type="text"
                  :disabled='row.publishState === 1'
                  @click="$router.push(`/questions/new?id=${row.id}`)"
                >修改</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="publishStates(row)"
                >{{row.publishState === 0?'上架':'下架'}}</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="del(row)"
                  :disabled='row.publishState === 1'
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页组件 -->
      <!-- <el-row
        type="flex"
        justify="center"
        align="middle"
        style="height:60px"
      >
        <el-pagination
          layout="prev,pager,next"
          :page-size="page.pagesize"
          :current-page="page.page"
          :total="total"
          @current-change="changePage"
        />
      </el-row> -->
      <div
        class="pagination"
        style="float:right;margin-top:20px;margin-bottom:20px"
      >
        <div class="pages">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="changePage"
            :current-page="page.page"
            :total="total"
            :page-size="page.pagesize"
            :page-sizes="[10,20,30, 50]"
            layout="sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 审核弹窗 -->
    <QuestionsCheck
      :show-dialog.sync="showDialog"
      :checkId="checkId"
      @resCheckedQuestionsList="resCheckedQuestionsList"
      @getQuestionsList="getQuestionsList"
      @getCheQuestionsList="getCheQuestionsList"
      @getCheckedQuestionsList="getCheckedQuestionsList"
    />
    <!-- 题目预览弹窗 -->
    <QuestionsPreview
      ref="perview"
      :showDialog.sync="previewDialog"
    />
  </div>
</template>

<script>
import { choice, choiceAdd, choicePublish } from '@/api/hmmm/questions'
import { questionType, difficulty, publishType } from '@/api/hmmm/constants'
import QuestionsCheck from '../components/questions-check.vue'
import questionFilter from '../components/question-filter.vue'
import QuestionsPreview from '../components/questions-preview.vue'
const chkType = [
  {
    value: 0,
    label: '待审核'
  },
  {
    value: 1,
    label: '已审核'
  },
  {
    value: 2,
    label: '拒绝'
  }
]
export default {
  name: 'SelectionQuestion',
  data () {
    return {
      questionList: [], // 盛放全部试题表格数据
      questionCheList: [], // 接收待审核列表
      CheckedQuestionsList: [], // 接收已审核列表
      resQuestionsList: [], // 已拒绝列表
      page: {
        page: 1, // 当前页码
        pagesize: 10 // 每页条数
      },
      total: 0, // 总数
      showDialog: false,
      previewDialog: false,
      checkId: '', // 审核id
      publishState: '' // 上架或者下架状态
      // disable: false // 禁用按钮

    }
  },
  components: {
    QuestionsCheck,
    questionFilter,
    QuestionsPreview
  },
  created () {
    this.getCheQuestionsList()
    this.getCheckedQuestionsList()
    this.resCheckedQuestionsList()
    this.getQuestionsList()
  },
  methods: {
    // regetQuestionsList (data) {
    //   this.questionList = data
    //   this.getQuestionsList()
    // },
    async getQuestionsList (searshData) {
      // if (searshData) {
      //   alert(0)
      //   this.questionList = searshData
      // }
      // console.log(searshData)
      // 获取全部试题列表
      const { data } = await choice(searshData)
      this.total = data.counts
      this.questionList = data.items

      // console.log(this.publishState = data.items.publishState)
      // console.log(data)
      // console.log(this.questionList)
    },
    async getCheQuestionsList (searshData) {
      // 获取待审核试题列表
      const { data } = await choice({ chkState: 0, ...searshData })
      this.total = data.counts
      // console.log(data.items)
      this.questionCheList = data.items
      // console.log(data.items[0].chkState)
    },
    async getCheckedQuestionsList (searshData) {
      // 获取已通过试题列表
      const { data } = await choice({ chkState: 1, ...searshData })
      this.total = data.counts
      // console.log(data.items)
      this.CheckedQuestionsList = data.items
    },
    async resCheckedQuestionsList (searshData) {
      // 获取已拒绝试题列表
      const { data } = await choice({ chkState: 2, ...searshData })
      // console.log(data.items)
      this.total = data.counts
      this.resQuestionsList = data.items
    },
    formatQuestType (row, column, cellValue, index) {
      // 修改题型
      // console.log(cellValue)
      const obj = questionType.find(item => item.value.toString() === cellValue)
      // const obj = questionType.filter(item => item.value === cellValue)
      // console.log(obj)
      // return obj.label

      return obj ? obj.label : '未知'
    },
    questionDifficulty (row, column, cellValue, index) {
      // 试题难度
      const obj = difficulty.find(item => item.value.toString() === cellValue)
      return obj ? obj.label : '未知'
    },
    questionChkType (row, column, cellValue, index) {
      // 审核状态
      const obj = chkType.find(item => item.value === cellValue)
      return obj ? obj.label : '未知'
    },
    questionPublishType (row, column, cellValue, index) {
      // 发布状态
      const obj = publishType.find(item => item.value === cellValue)
      return obj ? obj.label : '未知'
    },
    changePage (newPage) {
      // 分页方法
      this.page.page = newPage
      // 重新获取数据
      // this.getQuestionsList()
    },
    handleSizeChange (val) {
      this.page.pagesize = val
    },
    checkDialog (id) {
      // console.log(row)
      this.checkId = id
      this.showDialog = true
    },
    async del (row) {
      try {
        await this.$confirm('确定删除？')
        await choiceAdd({ id: row.id, choiceState: 0 })
        if (row.chkState === 0) {
          this.getCheQuestionsList()
        } else if (row.chkState === 1) {
          this.getCheckedQuestionsList()
        } else if (row.chkState === 2) {
          this.resCheckedQuestionsList()
        }
        this.getQuestionsList()

        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    async publishStates (row) {
      // 上架与下架方法
      try {
        // console.log(row)
        if (row.publishState === 0) {
          await this.$confirm('您确认上架该商品吗')
          this.publishState = 1
          // this.disable = true
        } else {
          await this.$confirm('您确认下架该商品吗')
          this.publishState = 0
          // this.disable = false
        }
        await choicePublish({ id: row.id, publishState: this.publishState })
        if (row.chkState === 0) {
          this.getCheQuestionsList()
        } else if (row.chkState === 1) {
          this.getCheckedQuestionsList()
        } else if (row.chkState === 2) {
          this.resCheckedQuestionsList()
        }
        this.getQuestionsList()
      } catch (error) {
        console.log(error)
      }
    },
    // 预览弹框
    showPreviewDialog (id) {
      this.$refs.perview.detail(id)
      this.previewDialog = true
    }
  }
}
</script>

<style scoped lang='less'>
</style>
